<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自由模式</title>
  <!-- 固定屏幕 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  
  <link rel="stylesheet" href="/assets/css/canvas/free.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <section class="tool-bar" id="tool">
    <span class="iconfont icon-pencil" id="pencil" hidden></span>
    <span class="iconfont" id="zuoyou" hidden>左右对称</span>
    <span class="iconfont icon-eraser" id="eraser"></span>
    <span class="iconfont icon-clear" id="clr"></span>
    
    <span class="iconfont" id="xuanzhuan" hidden>
      中心对称
      <select name="xuanzhuan" id="zxdc" hidden>
        <option value="6">6条对称线</option>
      </select>
    </span>
    <span class="iconfont" id="xuanzhuan2" hidden>
      旋转对称
      <select name="xuanzhuan" id="xzdc" hidden>
        <option value="4">4条对称线</option>
      </select>
    </span>
    <span class="iconfont" id="pingpu" hidden>旋转平铺</span>
    <span class="iconfont" id="cwpp" hidden>错位平铺</span>
  </section>
  
  <!-- 线条颜色 -->
  <section class="palette" id="Palette">
    <i class="iconfont icon-palette" id="toPalette"></i>
    <div class="bar">
      <div class="scroll">
        <i class="item black"></i>
        <i class="item red"></i>
        <i class="item pink"></i>
        <i class="item purple"></i>
        <i class="item deep-purple"></i>
        <i class="item indigo"></i>
        <i class="item blue"></i>
        <i class="item light-blue"></i>
        <i class="item cyan"></i>
        <i class="item green"></i>
        <i class="item light-green"></i>
        <i class="item lime"></i>
        <i class="item yellow"></i>
        <i class="item amber"></i>
        <i class="item orange"></i>
        <i class="item deep-orange"></i>
        <i class="item brown"></i>
        <i class="item grey"></i>
        <i class="item blue-grey"></i>
      </div>
    </div>
  </section>
  
  <!-- 线条粗细 -->
  <section class="width" id="width">
    <i class="iconfont icon-width" id="toWidth" ></i>
    <form class="bar">
      <input type="range" max="20" min="1" step="2" id="lineWidth" class="range" value="1">
    </form>
  </section>

  <!-- 撤回按钮 -->
  <i class="iconfont icon-cancel" id="cancel"></i>
  <!-- 下载图片 -->
  <i class="iconfont icon-demo" id="saveImg"></i>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="/assets/js/canvas/zyms.js"></script>
</body>
</html>
